<template>
	<view class="content">
		<view class="top-box"><!-- 需要添加背景v -->
			<view class="set-box" @click="toSet">
				<image src="../../static/images/icons/set.png" mode=""></image><!-- 设置 -->
			</view>
			<view class="userinfo-box">
				<view class="avatar-box">
					<view class="name-box" @click="toEditInfo">
						<image :src="userInfo.avatarPath" mode=""></image><!-- //用户头像v -->
						<view class="userinfo-name">{{userInfo.nickname}}</view><!-- //用户名v -->
					</view>
					<view class="userinfo">
						<view>
							个人主页
						</view>
						<image src="../../static/images/login/back.png" mode=""></image><!-- //右指向箭头v -->
					</view><!-- //用户信息页 -->
				</view>
				<view class="userinfo-num">
					<view class="num-lei">
						<view class="num">{{userInfo.liked}}</view>
						<view class="item">获赞</view>
					</view>
					<view class="num-lei">
						<view class="num">{{userInfo.send}}</view>
						<view class="item">发布</view>
					</view>
					<view class="num-lei">
						<view class="num">{{userInfo.concern}}</view>
						<view class="item">关注</view>
					</view>
					<view class="num-lei">
						<view class="num">{{userInfo.fans}}</view>
						<view class="item">粉丝</view>
					</view>
				</view>
			</view>
		</view>
		<view class="middle-box"><!-- //需添加背景v -->
			
			<view v-if="accountInfo.id > 0" class="show">
				<view class="user-a">
					<image src="../../static/logo.png" mode=""></image><!-- //logov -->
					<view class="Lv">{{accountInfo.level}}</view><!-- //角色等级v -->
					<view class="grade">
						Lv.<br>
						博士等级
					</view>
				</view>
				<view class="user-b">
					<view class="username">{{accountInfo.name}}#{{accountInfo.id}}</view><!-- //游戏角色用户名v -->
				</view>
				<view class="user-c">
					<view>
						<view class="itemName">作战进度<view>&nbsp;//</view></view>
						<view class="">全部完成</view>
					</view>
					<view>
						<view class="itemName">干员数量<view>&nbsp;//</view></view>
						<view>{{accountInfo.count}}</view>
					</view>
					<view>
						<view class="itemName">时装<view>&nbsp;//</view></view>
						<view>{{accountInfo.cloth}}</view>
					</view>
				</view>
			</view>
			<view v-else style="padding: 100rpx;text-align: center;color: #fff;font-weight: bolder">
				还未创建角色，暂无角色数据
			</view>
			
		</view>
		<view class="middle-bottom">
			<image src="../../static/picture/middle-bottom.png" mode=""></image><!-- //创作中心v -->
		</view>
		<view class="bottom-box">
			<view class="bottom" @click="toMyPost">
				<image src="../../static/my1.svg" mode=""></image>
				<view>我的帖子</view>
			</view>
			<view class="bottom" @click="toMyStar">
				<image src="../../static/my2.svg" mode=""></image>
				<view>我的收藏</view>
			</view>
			<view class="bottom">
				<image src="../../static/my3.svg" mode=""></image>
				<view>草稿箱</view>
			</view>
			<view class="bottom">
				<image src="../../static/my4.svg" mode=""></image>
				<view>我的角色</view>
			</view>
		</view>
		<view class="footer" @click="toWirtePost">
			<image src="../../static/images/icons/write.svg" mode="" ></image>
		</view>
	</view>
	
</template>

<script>
	import {v4 as uuidv4} from 'uuid'
	import {AccountInfo} from "../../static/js/Account.js"
	import {UserInfo,updateUser} from "../../static/js/User.js"
	export default {
		data() {
			return {
				accountInfo:{
					"id":0,
					"avatarPath":"../../static/images/avatar/logo.png",
					"level":0,
					"name":"null",
					"count":0,
					"cloth":0
				},
				userInfo:{
					"id":0,
					"avatarPath":"../../static/images/avatar/avatar.jpg",
					"nickname":"null",
					"liked":0,
					"send":0,
					"concern":0,
					"fans":0
				}
			}
		},
		onPullDownRefresh(){
			this.getInfo()
			this.refreshUserInfo()
		},
		onShow(){
			this.getInfo()
			this.refreshUserInfo()
		},
		methods: {
			getInfo(){
				this.userInfo = uni.getStorageSync('userInfo')
				AccountInfo(this.userInfo.id).then(res=>{
					if(res.data != null){
						this.accountInfo = res.data
					}
				}).catch(err=>{})
			},
			toEditInfo(){
				uni.navigateTo({
					url:"/pages/user/editInfo"
				})
			},
			toSet(){
				uni.navigateTo({
					url:"/pages/user/set"
				})
			},
			toWirtePost(){
				uni.navigateTo({
					url:"/pages/post/writePost"
				})
			},
			toMyStar(){
				uni.navigateTo({
					url:"/pages/user/myStar"
				})
			},
			toMyPost(){
				uni.navigateTo({
					url:"/pages/user/myPost"
				})
			},
			refreshUserInfo(){
				UserInfo(this.userInfo.id).then(res=>{
					if(res.data != null){
						this.userInfo = res.data
						uni.setStorageSync("userInfo",this.userInfo)
					}
				}).catch(err=>{})
				uni.stopPullDownRefresh()
			}
		}
	}
</script>

<style>
	@import url("../../static/css/base.css");
	page{
		background-color: #fff;
	}
	.content{
		overflow: hidden;
	}	
	.top-box{
		background: url(../../static/picture/top.png) no-repeat;
		background-size: 100% 75%;
		width: 100%;
	}
	.set-box{
		width: 100%;
		display: inline-block;
		margin-top: 60rpx;
		margin-right: 20rpx;
	}
	.set-box image{
		margin: 20rpx 20rpx 0 0;
		width: 36rpx;
		height: 32rpx;
		float: right;
		
		
	}
	.userinfo{
		margin: 20rpx;
	}
	.userinfo-box .avatar-box{
		display: flex;
		width: 100%;
		justify-content: space-between;
	}
	.name-box{
		display: flex;
	}
	.avatar-box image{
		height: 120rpx;
		width: 120rpx;
		border-radius: 50%;
		margin: 20rpx;
	}
	.name-box .userinfo-name{
		line-height: 160rpx;
		font-weight: bolder;
	}
	.userinfo {
		display: flex;
		align-items: center;
	}
	.userinfo image{
		width: 24rpx;
		height: 24rpx;
		margin: 0 5rpx;
		padding: 0;
	}
	.userinfo view {
		font-size: 24rpx;
		height: 24rpx;
		line-height: 24rpx;
	}
	.userinfo-num{
		display: flex;
		justify-content: space-around;
	}
	.num-lei .num{
		text-align: center;
		font-weight: bold;
	}
	.num-lei .item{
		text-align: center;
		font-size: 24rpx;
		color: #9b9b9b;
		margin: 15rpx 0;
	}
	.middle-box{
		background: url(../../static/picture/middle.png) no-repeat center;
		border-radius: 20rpx;
		margin: 20rpx;
		background-size: cover;
		padding-bottom: 20rpx;
	}

	.user-a {
		display: flex;
		color: #fff;
	}
	.user-a image{
		width: 80rpx;
		height: 80rpx;
		margin: 20rpx 0 0 30rpx;
	}
	.Lv{
		line-height: 100rpx;	
		font-size: 42rpx;
		margin: 0 10rpx;
		transform: scale(1,1.2);
	}
	.grade{
		display:flex;
		align-items:center;
		justify-content:center;
		font-size: 24rpx;
	}
	.user-b{
		color: #fff;
		margin: 30rpx;
	}
	.user-c{
		display: flex;
		color: #fff;
	}
	.user-c > view{
		margin: 0 30rpx;
	}
	.user-c .itemName{
		color: #9b9b9b;
		margin-bottom: 5rpx;
		font-size: 12rpx;
	}
	.itemName view{
		display: inline-block;
		margin-left: 5rpx;
		transform: scale(0.8);
		color: aqua;
	}
	.middle-bottom{
		display: flex;
	}
	.middle-bottom image{
		border-radius: 20rpx;
		width: 100%;
		height: 165rpx;
		margin: 20rpx;
		
	}

	.bottom-box{
		display: flex;
		justify-content: space-around;
		margin-top: 50rpx;
	}
	.bottom{
		display:flex;
		flex-direction: column;
		align-items: center;
	}
	.bottom image{
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 20rpx;
	}
	.bottom > view{
		color: #9b9b9b;
	}
</style>
